<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CRM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/loader-style.css">
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/assets/js/progress-bar/number-pb.css">
    <script src="/js/config.js"></script>
    <script src="/js/jquery-3.3.1.js"></script>
    <link rel="shortcut icon" href="/assets/ico/minus.png">

    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>

    <script src="${path}/js/jquery.min.js"></script>
    <script src="${path}/layui/layui.js"></script>

    <style>
        * {
            box-sizing: border-box;
        }
        .img-profile {
            margin: 0;
            text-align: left;
            width: 158px;
            height: 158px;
        }
        .layui-body{
            overflow: hidden;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 64px;
            bottom: 0;
            z-index: 998;
            box-sizing: border-box;
        }
       .layui-body{
           /*background-color: #FFFFFF;*/
       }
    </style>
    <script type="text/javascript">
        layui.use("layer");
        function logout() {
            layer.confirm('确定要退出吗？',{icon:3,title:'系统提示'},function (index) {
                location.href="${path}/User/logout";
            })
        }
    </script>
</head>

<body>
<!--  导航栏  -->
<div id="app">
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                <!--  时间  -->
                <div id="nt-title-container" class="navbar-left running-text visible-lg" style="width: auto;">
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>
                    </ul>
                    <ul id="digital-clock" class="digital" style="box-shadow: none; border: none">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li id="time"></li>
                    </ul>
                </div>
                <%--显示登录人的id--%>
                <%--<input type="text"  value="${sessionScope.login_user.id}">--%>
                <!--  右侧导航  -->
                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    <!--  头像  -->
                    <li>
                        <a class="dropdown-toggle">
                            <div>
                                <p><span style="font-size: 15px;">登录人:</span><span style="font-size: 13px;">&nbsp;${login_user.username}</span>
                                </p>
                            </div>
                        </a>
                    </li>
                    <!--  退出登录  -->
                    <li>
                        <a class="dropdown-toggle" href="" onclick="if(logout()){sessionStorage.clear();}else{return false;}">
                            <i style="color: #fff;" class="entypo-logout"></i> Logout
                        </a>
                    </li>
                    <!--  打开右侧菜单  -->
                    <li class="hidden-xs">
                        <a class="toggle-left" href="#">
                            <span style="font-size:20px;" class="entypo-list-add"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--  左侧目录  -->
    <div id="skin-select">
        <div id="logo">
            <h1 style="font-size: 23px;padding-top: 9px;">客户信息管理系统</h1>
        </div>
        <a id="toggle">
            <span class="entypo-menu"></span>
        </a>
        <div class="dark">
            <form action="#">
                <span>
                    <input type="text" name="search" class="search rounded id_search" autocomplete="off" placeholder="Search Menu..." autofocus="">
                </span>
            </form>
        </div>
        <div class="search-hover">
            <form id="demo-2">
                <input type="search" placeholder="Search Menu..." class="id_search">
            </form>
        </div>
        <div class="skin-part">
            <div id="tree-wrap">
                <div class="side-bar">
                    <ul class="topnav menu-left-nest" v-for="item in pers">
                        <c:forEach items="${sessionScope.user_pers}" var="parent">
                            <c:if test="${parent.parentid==null}">
                                <li>
                                    <a :href="item.url" style="border-left:0 solid!important;" class="title-menu-left">
                                        <span>${parent.name}</span>
                                        <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>
                                    </a>
                                </li>
                                <c:forEach items="${sessionScope.user_pers}" var="child">
                                    <c:if test="${child.parentid != null && child.parentid == parent.id}">
                                        <li class="zhan" v-for="sec in pers">
                                            <a class="tooltip-tip ajax-load" href="#" title="${child.name}">
                                                <i class="icon-view-thumb"></i>
                                                <span>${child.name}</span>
                                            </a>
                                            <ul>
                                                <c:forEach items="${sessionScope.user_pers}" var="childnode">
                                                    <c:if test="${childnode.parentid != null && childnode.parentid == child.id}">
                                                        <li>
                                                            <a class="tooltip-tip2 ajax-load" href="${path}/${childnode.url}"  target="box" title="${childnode.name}">
                                                                <i class="entypo-doc-text"></i>
                                                                <span>${childnode.name}</span>
                                                            </a>
                                                        </li>
                                                    </c:if>
                                                </c:forEach>
                                            </ul>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--  主体  -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">
            <div class="row">
                <div id="paper-top">
                    <div class="col-lg-3">
                        <h2 class="tittle-content-header">
                            <i class="icon-window"></i>
                            <span>Dashboard</span>
                        </h2>
                    </div>
                    <div class="col-lg-7">
                        <div class="devider-vertical visible-lg"></div>
                    </div>
                    <div class="col-lg-2">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="btn-group btn-wigdet pull-right visible-lg">
                            <div class="btn">Widget</div>
                            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul role="menu" class="dropdown-menu">
                                <li>
                                    <a href="#">
                                        <span class="entypo-plus-circled margin-iconic"></span>Add New</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="paper-middle">
                <div id="mapContainer" style="height: 100%">
                    <div class="layui-body" style="height: 100%">
                        <iframe height="100%" width="100%" src="/User/infoindex" name="box" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  右侧目录  -->
    <div class="sb-slidebar sb-right">
        <div class="right-wrapper">
            <div class="row">
                <h3>
                    <span><i class="entypo-vcard"></i>&nbsp;&nbsp;用户基本信息</span>
                </h3>
                <div class="col-lg-12 text-center">
                    <ul class="list-group" style="color: #ccc;margin-top: 50px;">
                        <%--<li class="list-group-item text-center"><img src="/images/${login_user.picture}" class="img-circle img-responsive img-profile"></li>--%>
                            <%--<li class="list-group-item text-right">--%>
                                <%--<span class="pull-left"><strong>职位</strong></span>--%>
                                <%--${crmRole.rolename}--%>
                            <%--</li>--%>
                        <li class="list-group-item text-right">
                            <span class="pull-left"><strong>姓名</strong></span>${login_user.username}
                        </li>
                        <li class="list-group-item text-right">
                            <span class="pull-left"><strong>性别</strong></span>${login_user.sex}
                        </li>
                        <li class="list-group-item text-right">
                            <span class="pull-left"><strong>地址</strong></span>${login_user.address}
                        </li>
                        <li class="list-group-item text-right">
                            <span class="pull-left"><strong>手机</strong></span>${login_user.phone}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<%--<script src="/js/vue.js"></script>--%>
<%--<script src="/js/json2.js"></script>--%>

<!--  左侧权限目录  -->
<%--<script>--%>
    <%--var vm = new Vue({--%>
        <%--el : '#app',--%>
        <%--data : {--%>
            <%--user : '',--%>
            <%--login_local : null--%>
        <%--},--%>
        <%--computed : {--%>
            <%--pers : function () {--%>
                <%--return this.login_local.user_pers;--%>
            <%--}--%>
        <%--},--%>
        <%--created : function () {--%>
            <%--var data = JSON.parse(sessionStorage.getItem("login_user"));--%>
            <%--this.login_local = data;--%>
            <%--this.user = data.user;--%>
        <%--}--%>
    <%--});--%>
    <%--//  因为不知道为什么 条件判断(v-if) 不起作用，所以只能在最后那些JS文件起作用之前，将多循环出来的东西删掉--%>
    <%--$(document).ready(function () {--%>
        <%--$(".side-bar ul.topnav").each(function() {--%>
            <%--if(!$(this).find("li").length) {--%>
                <%--$(this).remove();--%>
            <%--}--%>
            <%--$(".topnav li.zhan").each(function () {--%>
                <%--if (!$(this).find("a").length) {--%>
                    <%--$(this).remove();--%>
                <%--}--%>
            <%--});--%>
        <%--});--%>
        <%--$("li.zhan ul").each(function () {--%>
            <%--if (!$(this).find("li").length) {--%>
                <%--$(this).remove();--%>
            <%--}--%>
        <%--});--%>
    <%--});--%>
<%--</script>--%>
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/progress-bar/src/jquery.velocity.min.js"></script>
<script src="/assets/js/progress-bar/number-pb.js"></script>
<script type="text/javascript" src="/assets/js/preloader.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="/assets/js/load.js"></script>
<script type="text/javascript" src="/assets/js/main.js"></script>
<script type="text/javascript" src="/assets/js/countdown/jquery.countdown.js"></script>
<!--  显示时间（只有  时分秒）  -->
<script type="text/javascript">
    $(function() {
        startTime();
    });

    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();

        // add a zero in front of numbers<10
        h = checkTime(h);
        m = checkTime(m);
        s = checkTime(s);

        var day_or_night = (h > 11) ? "PM" : "AM";

        //Convert to 12 hours system
        // if (h > 12)
        //     h -= 12;

        //Add time to the headline and update every 500 milliseconds
        $('#time').html(h + " : " + m + " : " + s + " " + day_or_night);
        setTimeout(function() {
            startTime()
        }, 500);
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>
</body>
</html>